<template>
	<view class="pages">
		<uni-segmented-control v-if="disabled" :current="current" :values="items" style-type="text" active-color="#2D82F6" @clickItem="onClickItem" style="margin-bottom: 20px;" />
		<view v-if="current === 0">
			<uni-forms class="dialog-content" ref="valiForm" :modelValue="formData" :rules="rules">
				<uni-forms-item label="工单类型" name="gdTypeCode" required>
					<uni-easyinput type="text" style="display: none;" v-model="formData.gdTypeCode" />
					<uni-data-picker
						v-if="!disabled"
						@change="onchange"
						v-model="formData.gdTypeCode"
						popup-title="请选择工单类型"
						:localdata="gdTypeOptions"
						:map="{ text: 'gdTypeName', value: 'gdTypeCode' }"
					></uni-data-picker>
					<uni-easyinput v-else :disabled="disabled" type="text" :value="formData.gdTypeName" />
				</uni-forms-item>
				<uni-forms-item label="任务标题" name="title" required>
					<uni-easyinput :disabled="disabled" type="text" v-model="formData.title" placeholder="请输入任务标题" />
				</uni-forms-item>
				<uni-forms-item label="责任人" name="principalId" required>
					<uni-easyinput type="text" style="display: none;" v-model="formData.principalId" />
					<uni-data-picker
						v-if="!disabled"
						@change="onchangeUserOptions"
						v-model="formData.principalId"
						popup-title="请选择责任人"
						:localdata="userNameOptions"
						:map="{ text: 'realName', value: 'userId' }"
					></uni-data-picker>
					<uni-easyinput v-else :disabled="disabled" type="text" :value="formData.principalName" />
				</uni-forms-item>
				<uni-forms-item label="监督人" name="principalId" required>
					<uni-easyinput type="text" style="display: none;" v-model="formData.superviseId" />
					<uni-data-picker
						v-if="!disabled"
						@change="onchangeSysUserOptions"
						v-model="formData.superviseId"
						popup-title="请选择责任人"
						:localdata="sysUserOptions"
						:map="{ text: 'realName', value: 'userId' }"
					></uni-data-picker>
					<uni-easyinput v-else :disabled="disabled" type="text" :value="formData.superviseName" />
				</uni-forms-item>
				<uni-forms-item label="任务内容" name="content">
					<uni-easyinput :disabled="disabled" type="textarea" v-model="formData.content" placeholder="请输入任务内容" />
				</uni-forms-item>
				<uni-forms-item label="上传图片" v-if="!disabled"><uni-file-picker limit="3" ref="files" :auto-upload="false"></uni-file-picker></uni-forms-item>
				<uni-forms-item label="图片" v-if="disabled">
					<uni-file-picker :readonly="true" :value="formData.pics | imagesFormat" limit="2" ref="files"></uni-file-picker>
				</uni-forms-item>
				<button type="primary" :hidden="disabled" @click="submit('valiForm')">提交</button>
			</uni-forms>
		</view>
		<view v-if="current === 1">
			<Liststeps v-for="(item, index) in stepList" :activity="item.done" :key="index" :index="index">
				<text slot="date" v-if="index == 0" style="color: #2D82F6;">{{ item.date }}</text>
				<text slot="date" v-else>{{ item.date }}</text>
				<view slot="content">
					<view class="info_item" v-for="(info, index) in item.infoList" :key="index">
						<view class="label">{{ info.label }}</view>
						<view class="value">{{ info.value }}{{ info.unit || '' }}</view>
					</view>
				</view>
				<view slot="content" style="margin-bottom: 20px;" v-if="item.pics.length > 0">
					<view class="info_item">
						<view class="label">附件</view>
						<view class="value"><uni-file-picker :readonly="true" :value="item.pics | imagesFormat" limit="2" ref="files"></uni-file-picker></view>
					</view>
				</view>
			</Liststeps>
			<cell class="loading-more" v-if="stepList.length == 0">
				<image style="width:450rpx;height:450rpx;margin-top: 300rpx;margin-left: 80px;" src="../../static/icon/noData.png"></image>
			</cell>
		</view>
	</view>
</template>
<script>
import { mapGetters } from 'vuex'
import baseUrl from '../../config/baseUrl.js'
import Liststeps from '../../components/lwp-step/lwp-step.vue'
import { getList, update, getDetail, add, getgdTypeList, getgdTaskFile, getgdTaskReplyList, getgdReplyFile } from '@/api/gdTask.js'
import { getUserList } from '@/api/systemUser.js'
let that = null
export default {
	components: { Liststeps },
	computed: {},
	data() {
		return {
			current: 0,
			disabled: false,
			items: ['工单详情', '处置记录'],
			stepList: [],
			gdTypeOptions: [],
			userNameOptions: [],
			sysUserOptions: [],
			formData: { pics: [], taskFileList: [] },
			rules: {
				gdTypeCode: {
					rules: [
						{
							required: true,
							errorMessage: '请选择工单类型'
						}
					]
				},
				title: {
					rules: [
						{
							required: true,
							errorMessage: '请输入任务标题'
						}
					]
				},
				principalId: {
					rules: [
						{
							required: true,
							errorMessage: '请选择责任人'
						}
					]
				},
				content: {
					rules: [
						{
							required: true,
							errorMessage: '请输入内容'
						}
					]
				}
			}
		}
	},
	created() {},
	computed: { ...mapGetters({ userInfo: 'userInfo' }) },
	onLoad(options) {
		if (options.id != null) {
			uni.setNavigationBarTitle({ title:'工单详情' })
			//查看
			this.disabled = true
			uni.getStorage({
				key: 'gdTaskFile',
				success: res => {
					this.formData = res.data
				}
			})
			getgdTaskReplyList({ pageNum: 1, pageSize: 999, taskId: options.id }).then(
				res => {
					res.rows.forEach(item => {
						this.stepList.push({
							date: item.createTime.substring(5, 16),
							businessId: item.replyId,
							done: false,
							infoList: [
								{
									label: '描述',
									value: item.content
								},
								{
									label: '操作人',
									value: item.createUserName
								}
							],
							pics: []
						})
						this.stepList[0].done = true
					})
				},
				err => {}
			)
		}
		getgdTypeList().then(
			res => {
				this.gdTypeOptions = res.rows
			},
			err => {}
		)
		getUserList({}).then(res => {
			this.sysUserOptions = res.rows
		})
	},
	methods: {
		async getFileList(taskId) {
			return new Promise(resolve => {
				getgdReplyFile({ replyId: taskId }).then(res => {
					resolve(res.rows)
				})
			})
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex
				this.stepList.forEach(item => {
					this.getFileList(item.businessId).then(file => {
						item.pics = file
					})
				})
			}
		},
		onchange(e) {
			var orgid = ''
			const select = e.detail.value[0]
			this.formData.gdTypeName = select.text
			this.gdTypeOptions.forEach(item => {
				if (item.gdTypeCode == select.value) {
					orgid = item.orgId
				}
			})
			getUserList({ orgId: orgid }).then(res => {
				this.userNameOptions = res.rows
			})
		},
		onchangeUserOptions(e) {
			const select = e.detail.value[0]
			this.formData.principalName = select.text
		},
		onchangeSysUserOptions(e) {
			const select = e.detail.value[0]
			this.formData.superviseName = select.text
		},
		uploadPic() {
			let pics = []
			let token = this.userInfo.token
			let length = this.$refs.files.files.length
			let count = 0
			return new Promise((resolve, reject) => {
				this.$refs.files.files.forEach(function(item, index) {
					let n = uni.uploadFile({
						url: baseUrl.baseUrl + '/public/uploadAttachmentFile',
						header: { token: token },
						filePath: item.url,
						name: 'file',
						success: uploadFileRes => {
							let json = JSON.parse(uploadFileRes.data)
							pics.push({
								fileName: item.name,
								filePath: json.data,
								fileSize: item.size / 1024 / 1024,
								fileTypeImg: baseUrl.baseUrl + json.data,
								index: false,
								resourcesType: item.extname,
								srcImgList: [baseUrl.baseUrl + json.data],
								srcListImg: { fileName: item.name, filePath: json.data }
							})
							count++
							if (count == length) {
								resolve(pics)
							}
						}
					})
				})
			})
		},
		async submit(ref) {
			if (this.$refs.files.files.length > 0) {
				let roadDiseaseSporPics = await this.uploadPic()
				this.formData.taskFileList = roadDiseaseSporPics
			}
			this.$refs.valiForm
				.validate()
				.then(res => {
					this.formData.status = 0
					add(this.formData).then(
						res => {
							uni.showToast({
								title: '保存成功',
								duration: 1000
							})
							uni.navigateTo({ url: './index' })
						},
						err => {}
					)
				})
				.catch(err => {
					console.log('表单错误信息：', err)
				})
		}
	}
}
</script>

<style scoped lang="less">
.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.list {
	margin-bottom: 30rpx;
	background-color: #f9f9f9;
}

.diseaseList {
	font-size: 36rpx;
}

.diseaseList-header {
	color: #666666;
	flex-direction: row;
}

.info_item {
	font-size: 28rpx;
	font-weight: 400;
	color: #949596;
	display: flex;
	.value {
		flex: 1;
		margin-left: 32rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #4a4d50;
	}
}

.loading-more {
	align-items: center;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.loading-more-text {
	font-size: 28rpx;
	color: #999;
}
</style>
<style lang="scss" scoped>
.pages {
	background-color: #ffffff;
}
.dialog-content {
	background-color: #fff;
	padding: 10rpx 50rpx 30rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
}
</style>
